<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>订单信息</title>
    <script src="__JS__/mui.min.js"></script>
    <link href="__CSS__/mui.min.css" rel="stylesheet"/>
    <link href="__CSS__/base.css" rel="stylesheet" />
    <link href="__CSS__/index.css" rel="stylesheet" />
	</head>
	<body class="bg-grey">
		<header class="app_header">
			<div class="back"></div>
			订单信息
		</header>
		<div class="order-course">
			
			<img src="{$host}{$course['path']}" class="order-img"/>
			<div class="o-div">
			<p class="order-h1 order-span">{$course['name']}</p>
			<p class="order-p1 order-span color-red">价格：￥{$course['price']}</p>
			<p class="color-textarea order-span">{$course['content']}</p>
			<input type="hidden" value="{$course['id']}" id="course_id"/>
			</div>
		</div>
		<div class="order-nav">
				学员信息
		</div>
		<div class="order-tap" id="studentInfo">
			<span class="d-span1">
				请填写学员信息
			</span>
			<span class="font-right"><img class="next-img" src="__IMG__/next.png"/>
			</span>
		</div>
		<div class="order-nav">
				结算信息
		</div>
		<div class="order-tap">
			<span class="d-span1">
				应付金额
			</span>
			<span class="font-right d-span1" id="pay_price">
				￥11111
			</span>
		</div>
		
		<div class="order-nav">
				可选优惠
		</div>
		<div class="order-tap">
			<span class="d-span2">
				<div class="coupon-check">
					<div class="coupon-selected area-center" id="coupon">
						优惠券￥{$coupon['money']}
						<input type="hidden" value="{$coupon['money']}" id="coupon_money"/>
						<input type="hidden" value="{$coupon['id']}" id="coupon_id"/>
					</div>
				</div>
			</span>
		</div>
		
		<div class="order-nav">
				支付类型
		</div>
		<div class="order-tap">
			<span class="d-span2">
				<div class="coupon-check">
					<div class="coupon-selected area-center" id="pay">
						全额支付
						<input type="hidden" value="1" id="payact"/>
					</div>
				</div>
			</span>
		</div>
		
		<div class="order-nav">
				电子协议
		</div>
		<div class="order-tap">
		<div class="select-icon" id="select-icon"/></div>
			<span class="d-span1">
				我已经阅读并同意<a>《合作协议》</a>
			</span>
		</div>
		<div class="h-bottom">
		</div>
	</body>
	<footer>
		<div class="app_footer btn-buy area-center" id="sub_order">
			立即报名
		</div>
	</footer>
<script type="text/javascript" src="__JS__/filexible_css.js" ></script>
<script type="text/javascript" src="__JS__/flexible.js" ></script>
<script>
		mui.init();
		mui("body").on("tap",".back",function(){
			window.history.back();
		});
		
		mui("body").on("tap","#studentInfo",function(){
			window.location.href="{:U('studentInfo')}"+"&courseid="+"{$course['id']}";
		})
		mui(".coupon-check").on("tap","#coupon",function(){
			if(this.getAttribute("class")=="coupon-selected area-center"){
				this.setAttribute("class","coupon area-center");
				mui("#coupon_money")[0].value=0;
			}else{
				this.setAttribute("class","coupon-selected area-center");
				mui("#coupon_money")[0].value="{$coupon['money']}";
			}
			moneycall();
		})
		mui(".coupon-check").on("tap","#pay",function(){
			if(this.getAttribute("class")=="coupon-selected area-center"){
				this.setAttribute("class","coupon area-center");
			}else{
				this.setAttribute("class","coupon-selected area-center");
			}
		})
		mui(".order-tap").on("tap","#select-icon",function(){
			if(this.getAttribute("class")=="select-icon"){
				this.setAttribute("class","unselect-icon");
				mui("#sub_order")[0].classList.remove("btn-buy");
				mui("#sub_order")[0].classList.add("btn-unbuy");
				mui("#sub_order")[0].classList.add("mui-disabled")
			}else{
				this.setAttribute("class","select-icon");
				mui("#sub_order")[0].classList.remove("btn-unbuy");
				mui("#sub_order")[0].classList.add("btn-buy");
				mui("#sub_order")[0].classList.remove("mui-disabled")
			}
		})
		function moneycall(){
			var coupon=mui("#coupon_money")[0].value;
			var money="{$course['price']}"-coupon;
			mui("#pay_price")[0].innerHTML="￥"+money;
		}
		moneycall();
		mui("footer").on("tap",".btn-buy",function(){
			var course_id=mui("#course_id")[0].value;
			var coupon_id=mui("#coupon_id")[0].value;
			
			mui.post("{:U('tradeorder')}",{course_id:course_id,coupon_id:coupon_id},function(json){
				var data=eval(json);
				mui.alert(data.info);
				if(data.status==1){
					window.location.href=data.url;
				}
			})
			
		})
		
	</script>
</html>
